<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <button class="up">销量升序</button>
    <button class="down">销量降序</button>
    <ul></ul>

    <script>
      var cups = [
        { type: 1, price: 100, color: 'black', sales: 3000, name: '牛客logo马克杯' },
        { type: 2, price: 40, color: 'blue', sales: 1000, name: '无盖星空杯' },
        { type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },
        { type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' },
      ]
      var ul = document.querySelector('ul')
      var upbtn = document.querySelector('.up')
      var downbtn = document.querySelector('.down')
      // 补全代码
      // 冒泡排列  升序
      var temp = ''
      for (var i = 0; i < cups.length; i++) {
        for (var j = 0; j < cups.length - i - 1; j++) {
          if (cups[j].price < cups[j + 1].price) {
            temp = cups[j]
            cups[j] = cups[j + 1]
            cups[j + 1] = temp
          }
        }
      }
      var j = cups.length
      upbtn.addEventListener('click', () => {
        ul.innerHTML = ''
        for (var i = 0; i < cups.length; i++) {
          var lis = document.createElement('li')
          lis.innerHTML = cups[--j].name
          ul.appendChild(lis)
        }
        j = cups.length
      })
      downbtn.addEventListener('click', () => {
        ul.innerHTML = ''
        for (var i = 0; i < cups.length; i++) {
          var lis = document.createElement('li')
          lis.innerHTML = cups[i].name
          ul.appendChild(lis)
        }
      })
    </script>
  </body>
</html>
